<template>
	<div class="max">
		<my-header :backBtn="true">
			<div slot="title">反馈</div>
		</my-header>
		<div class="cont-nof">
			<div class="feedback_block oh">
				<div class="home_title tl">
					请选择反馈类型：
				</div>
				<div class="tag-list flex">
					<div v-for="item in type" @click="addType(item)" :class="{'isselect':parmas.title==item}">
						{{item}}
					</div>
				</div>
			</div>
			<div class="feedback_block oh" style="padding: 1rem;">
				<contenteditable ref="input" placeholder="请输入文字" :placeholder="'请写下您的反馈信息'" @input="getContent"></contenteditable>
				<upload-file ref="upload" :max="1"></upload-file>
			</div>
			<div class="submit" @click="submit">
				提交
			</div>
		</div>
	</div>
</template>

<script>
	import contenteditable from '@/components/contenteditable.vue';
	import uploadFile from '@/components/uploadFile.vue';
	export default {
		components: {
			contenteditable,
			uploadFile
		},
		data() {
			return {
				type: ['网络问题', '视频卡顿', '视频模糊', '视频错乱', '不良视频', '其他'],
				parmas: {
					title: '视频反馈',
					content: '',
					imgList: [],
				}
			}
		},
		methods: {
			addType(item) {
				this.parmas.title = item;
			},
			getContent(val) {
				this.parmas.content = val;
			},
			submit() {
				this.parmas.imgList = this.$refs.upload.getUpList();
				if (this.parmas.type == '') {
					this.$weui.topTips('请选择反馈类型');
					return
				}
				if (!this.parmas.content) {
					this.$weui.topTips('请输入反馈内容');
					return
				}
				this.$http.createFeedback(this.parmas).then(resp => {
					Object.assign(this.parmas, {
						title: '',
						content: '',
						imgList: [],
					});
					this.$refs.input.reset();
					this.$weui.toast('提交成功');
					history.back();
				})
			}
		}
	}
</script>
<style scoped>
	.feedback_block {
		width: calc(100% - 2rem);
		margin: 1.5rem auto 0 auto;
		background: #FFFFFF;
		border-radius: 6px;
		box-sizing: border-box;
	}

	.home_title {
		font-size: 1.6rem;
		border-left: 4px solid #36C12D;
		border-radius: 10px;
		width: 0;
		white-space: nowrap;
		text-indent: 1rem;
		line-height: 1.6rem;
		height: 1.6rem;
		margin-bottom: 1.5rem;
		margin-top: 1.5rem;
		margin-left: 1rem;
	}

	.tag-list {
		width: calc(100% - 1rem);
		flex-wrap: wrap;
	}

	.tag-list>div {
		width: 7.6rem;
		height: 3.5rem;
		line-height: 3.5rem;
		border: 1px solid #36C12D;
		box-sizing: border-box;
		border-radius: 4px;
		margin-left: 1rem;
		margin-bottom: 1rem;
	}

	.isselect {
		background: #36C12D;
		color: #FFFFFF;
	}

	.submit {
		width: 14rem;
		height: 3.5rem;
		line-height: 3.5rem;
		border-radius: 60px;
		background-color: rgba(54, 193, 45, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 2rem;
		margin: 10rem auto;
	}
</style>
